/**
* 功能描述: 单选按钮组demo
* @author 崔孝楠
* @date 2022/9/29 16:38
* @version 1.0
*/
<template>
  <div>
    <!-- 基础单选按钮组 -->
    <div class="yw-radio-button-group">
      <label class="yw-radio-button-wrapper yw-radio-button-wrapper-checked">
        <span class="yw-radio-button">
          <input type="radio" class="yw-radio-button-input">
          <span class="yw-radio-button-inner"></span>
        </span>
        <span>Hangzhou</span>
      </label>
      <label class="yw-radio-button-wrapper">
        <span class="yw-radio-button">
          <input type="radio" class="yw-radio-button-input">
          <span class="yw-radio-button-inner"></span>
        </span>
        <span>Shanghai</span>
      </label>
      <label class="yw-radio-button-wrapper">
        <span class="yw-radio-button">
          <input type="radio" class="yw-radio-button-input">
          <span class="yw-radio-button-inner"></span>
        </span>
        <span>Beijing</span>
      </label>
      <label class="yw-radio-button-wrapper">
        <span class="yw-radio-button">
          <input type="radio" class="yw-radio-button-input">
          <span class="yw-radio-button-inner"></span>
        </span><span>Chengdu</span>
      </label>
    </div>
    <!-- 单独禁用某个按钮 -->
    <div class="yw-radio-button-group">
      <label class="yw-radio-button-wrapper yw-radio-button-wrapper-checked">
        <span class="yw-radio-button">
          <input type="radio" class="yw-radio-button-input">
          <span class="yw-radio-button-inner"></span>
        </span>
        <span>Hangzhou</span>
      </label>
      <label class="yw-radio-button-wrapper yw-radio-button-wrapper-disabled">
        <span class="yw-radio-button">
          <input type="radio" disabled="" class="yw-radio-button-input">
          <span class="yw-radio-button-inner"></span>
        </span>
        <span>Shanghai</span>
      </label>
      <label class="yw-radio-button-wrapper">
        <span class="yw-radio-button">
          <input type="radio" class="yw-radio-button-input">
          <span class="yw-radio-button-inner"></span>
        </span><span>Beijing</span>
      </label>
      <label class="yw-radio-button-wrapper">
        <span class="yw-radio-button">
          <input type="radio" class="yw-radio-button-input">
          <span class="yw-radio-button-inner"></span>
        </span>
        <span>Chengdu</span>
      </label>
    </div>
    <!-- 禁用所有按钮 -->
    <div class="yw-radio-button-group">
      <label class="yw-radio-button-wrapper yw-radio-button-wrapper-checked yw-radio-button-wrapper-disabled">
        <span class="yw-radio-button">
          <input type="radio" class="yw-radio-button-input">
          <span class="yw-radio-button-inner"></span>
        </span>
        <span>Hangzhou</span>
      </label>
      <label class="yw-radio-button-wrapper yw-radio-button-wrapper-disabled">
        <span class="yw-radio-button">
          <input type="radio" class="yw-radio-button-input">
          <span class="yw-radio-button-inner"></span>
        </span>
        <span>Shanghai</span>
      </label>
      <label class="yw-radio-button-wrapper yw-radio-button-wrapper-disabled">
        <span class="yw-radio-button">
          <input type="radio" class="yw-radio-button-input">
          <span class="yw-radio-button-inner"></span>
        </span>
        <span>Beijing</span>
      </label>
      <label class="yw-radio-button-wrapper yw-radio-button-wrapper-disabled">
        <span class="yw-radio-button">
          <input type="radio" class="yw-radio-button-input">
          <span class="yw-radio-button-inner"></span>
        </span>
        <span>Chengdu</span>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>
.yw-radio-button-group {
  margin: 10px;
}
</style>
